<script lang="ts" setup>
    import { useUserStore } from '@/stores/user';
import { useCookies } from '@vueuse/integrations/useCookies';
    import { ref } from 'vue'
import { useRouter } from 'vue-router';

    const activeIndex = ref('1')
    const handleSelect = (key: string, keyPath: string[]) => {
        console.log(key, keyPath)
    }
    //从pinia用户数据单元中获取用户对象
    const userStore=useUserStore()
    const user=userStore.getUser
    //获取cookies对象
    const cookies=useCookies()
    //获取路由器对象
    const router=useRouter()
    //退出系统
    function exit(){
        //移除cookie中用户编号
        cookies.remove('token')
        //跳转到登录组件
        router.push('/login')
    }
</script>

<template>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
        @select="handleSelect">
        <el-menu-item index="0">
            后台管理系统
        </el-menu-item>
        <el-menu-item index="1">{{user.username}}</el-menu-item>
        <el-sub-menu index="2">
            <template #title>系统设置</template>
            <el-menu-item index="2-1">个人信息</el-menu-item>
            <el-menu-item index="2-2">修改密码</el-menu-item>
            <el-menu-item index="2-3" @click="exit">退出系统</el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>

<style scoped>
.el-menu--horizontal>.el-menu-item:nth-child(1) {
    margin-right: auto;
}
</style>
